<template>
  <div class="user-following-wrapper">
    <div class="user-following-title">
      <item-list
        :items="categoriesCover"
        :idx="categoryIdx"
        class="category-list"
      ></item-list>
      <search-bar
        class="user-following-search"
        v-model:searchValue="searchValue"
      ></search-bar>
    </div>

    <user-list
      :users="filteredFollowings"
      @fetchUsers="fetchFollowings"
      class="user-list"
    ></user-list>
  </div>
</template>

<script lang="ts" setup>
import SearchBar from '@c/utils/SearchBar.vue'
import ItemList from '@c/utils/ItemList.vue'
import UserList from '@c/UserList.vue'
import { ref, reactive, computed } from 'vue'
import { post } from '@/utils/request'
import { show } from '@/utils/popup'

const categories = ['following']
const categoriesZh = ['关注']
let searching = ref(false)
const categoryIdx = ref(0)
const followings = reactive([] as App.Author[])
let page = 0
let searchValue = ref('')

let filteredFollowings = computed(() => {
  return followings.filter((e) => {
    return e.name.includes(searchValue.value)
  })
})

function fetchFollowings() {
  post('/user/following', {
    page: ++page,
  })
    .then((res) => {
      let data = res.data as App.Author[]
      data.forEach((author) => followings.push(author))
      if (data.length === 0) page--
    })
    .catch((error) => {
      show('获取关注列表失败')
      page--
    })
}
</script>

<style scoped lang="scss">
$w: var(--innerWidthPart1);
$th: calc(var(--innerWidthPart1) * 0.065);

.user-following-wrapper {
  width: $w;

  .user-following-title {
    position: relative;
    box-sizing: border-box;
    width: $w;
    height: $th;
    padding: 0 calc($w / 50);
    border-bottom: 1px solid var(--gray);

    .category-list {
      float: left;
      --itemListWidth: calc($w * 0.2);
      --itemListHeight: calc($th);
    }

    .user-following-search {
      float: right;
      --searchBarWidth: calc($w * 0.2);
      --searchBarHeight: $th;
      --searchBarFontSize: calc($th / 4);
      --searchBarInnerHeight: calc($th * 0.6);
      --backgroundColor: white;

      &:focus-within {
        --searchBarWidth: calc($w * 0.35);
      }
    }
  }

  .user-list {
    --userListWidth: $w;
  }
}
</style>
